<template>
  <div>
    <div>
      <router-link to="/homepage">首页</router-link>
      <router-link to="/assortmore">分类</router-link>
      <router-link to="/orderform">订单</router-link>
      <router-link to="/mineall">我的</router-link>
    </div>
    <div>
      <!-- 设置一个出口 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {}
// 第一步 下载yarn add vue-router@3.5.3这个包   然后引入vue-route
// 第二步 让vue使用这个插件  Vue.use(VueRouter)
// 第三步 创建一个路由器实例  入口 const router = new VueRouter({})
// 第四步 在main.js里面的new Vue把路由关联到vue实例
// 第五步 在App.vue里面需要被渲染的地方
//       为routes添加一个 <router-view></router-view>
//       表示匹配到的组件在哪里渲染 并且执行里面的代码
// 第六步 在src下面新建一个router文件夹 里面写上index.js
//       并且把之前的第一步到第三步全部拉进来
//       因为新拉进来的Vue没有引入 所以我们手动添加一个  import Vue from 'vue'
// 第七步 index.js里面暴露出去一个叫做router的文件夹(常量路由器)
// 第八步 在main.js里面引入暴露出去的router  系统会自动追踪这个文件夹里的index.js
// 第九步 父组件用自带的全局组件router-link来替代a标签 必要值to里面写需要导入的子组件名字就好了 不知道为什么小写也可以
</script>

<style></style>
